Vue.component('tab', {
    template: `<section v-show="isActive"><slot /></section>`,
    props: {
        name: {
            require: true
        }
    },
    data: () => ({
        isActive: false
    })
});
Vue.component('tabs', {
    template: `<div class="ard no-padding">
                    <div class="card-header">
                        <ul class="nav nav-pills card-header-pills">
                            <li v-for="(item, index) in tabs" class="nav-item">
                                <a class="nav-link" :class="{active: active === index}" href="javascript:;" @click="sel(index)">{{item.name}}</a>
                            </li>
                        </ul>
                    </div>
                    <div class="card-body">
                        <slot />
                    </div>
               </div>`,
    data: () => ({
        tabs: [],
        active: 0
    }),
    created() {
        this.tabs = this.$children;
    },
    mounted () {
        this.change();
    },
    methods: {
        sel (index) {
            if (index === this.active) {
                return;
            }
            this.active = index;
            this.change();
        },
        change () {
            const vm = this;
            vm.tabs.forEach((tab, index) => {
                tab.isActive = index === vm.active;
            });
        }
    }
});